<style lang="less">
  @import '../../styles/common.less';
</style>
<style>
  .color-span {
    color: #ffffff;
    padding: 3px 8px;
    margin: 4px;
    border-radius: 3px;
    cursor: pointer;
  }

  .tag-info-div .ivu-form-item {
    margin-top: 5px;
  }
</style>
<template>
  <div class="tag-info-div" @click="">
    <FormItem :label="title ? title : '标签'">
      <div class="dataDetail-div" :class="noBorder ? 'div-no-border' : ''">
        <Tag :color="colorsObj[el.color] ? colorsObj[el.color] : colorsObj['default']" v-for="el in tag"
             :key="'tag_'+el.id" :checkable="isDetail ? false : true"
             v-text="el.title" @on-change="closeTag(el)"></Tag>

        <Button icon="ios-add" type="dashed" size="small"
                @click="add" v-text="title ? '添加' + title : '添加标签'">添加标签
        </Button>
      </div>
    </FormItem>
    <FormItem :label="title ? '搜索' + title : '搜索标签'">
      <Input v-model.trim="name" placeholder="请输入" @on-change="changeInput"></Input>
    </FormItem>
    <FormItem :label="title ? '添加' + title : '添加标签'" v-if="tagArr.length > 0">
      <div class="dataDetail-div" :class="noBorder ? 'div-no-border' : ''">
        <Tag :color="colorsObj[el.color] ? colorsObj[el.color] : colorsObj['default']" :checkable="true"
             v-for="el in tagArr"
             :key="'tagArr_'+el.id"
             v-text="el.title" @on-change="chooseTag(el)"></Tag>
      </div>
    </FormItem>

    <!--添加-->
    <Modal v-model="showAddModal" :width="600" :mask-closable="false" :closable="false"
           class-name="vertical-center-modal" class="Modal-Detail-div">
      <h3 slot="header" style="color:#2D8CF0" v-text="title ? '添加' + title : '添加标签'">添加标签</h3>
      <Form label-position="top">
        <FormItem label="标签名称">
          <Input v-model.trim="addData.name" placeholder="请输入标签名称"></Input>
        </FormItem>
        <FormItem label="颜色">
          <div class="dataDetail-div">
            <span class="color-span" v-for="el in colorsArrObj"
                  :style="{ backgroundColor: el.num }"
                  :key="'color_' + el.color" v-text="el.title" @click="chooseColor(el)">
            </span>
          </div>
        </FormItem>
        <FormItem label="预览">
          <div class="dataDetail-div">
            <Tag :color="colorsObj[addData.color] ? colorsObj[addData.color] : colorsObj['default']"
                 v-if="addData.name"
                 v-text="addData.name"></Tag>
          </div>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="heidAdd">取消</Button>
        <Button type="primary" @click="addDataFun()">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../../libs/util';
  import Utils from '../../../libs/mod.utils';
  import String from '../../../libs/mod.string';
  import Modal from '../../../libs/mod.Modal';
  import Ckeditor from '../../../libs/mod.ckeditor';
  import util from '@/libs/util.js';
  export default {
    name: 'userInfo',
    components: {},
    props: ['tag', 'title', 'isDetail', 'noBorder', 'fid', 'queryData'],
    data () {
      return {
        uid: '',
        back_id: -1,

        name: '',
        tagArr: [],

        showAddModal: false,
        addData: {
          name: '',
          color: 'blue',
        },
        colorsArrObj: Util.constant.colorsArrObj,
        colorsObj: Util.constant.colorsObj,
      };
    },
    created: function () {
      var _this = this;
    },
    mounted () {
      var _this = this;
    },
    watch: {},
    methods: {
      add: function () {
        var _this = this;
        _this.addData.name = '';
        _this.addData.color = 'blue';
        _this.showAddModal = true;
      },
      heidAdd: function () {
        var _this = this;
        _this.showAddModal = false;
      },
      addDataFun: function () {
        var _this = this;
        var name = _this.addData.name;
        var color = _this.addData.color;
        if (!name) {
          _this.$Message.destroy();
          _this.$Message.error('请填写标签名称!');
          return false;
        }
        if (!color) {
          _this.$Message.destroy();
          _this.$Message.error('请选择颜色!');
          return false;
        }
        var Data = {
          title: name,
          color: color,
        };
        var params = {
          url: '/tag/add',
          type: Util.method.post,
          data: Data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || null;
            if (data) {
              var tag = _this.tag || [];
              var tagIds = [];
              for (var k in tag) {
                if (!tag[k]) {
                  continue;
                }
                tagIds.push(tag[k].id);
              }
              var id = data.id;
              if (id) {
                tagIds.push(id);
                tag.push(data);
                var obj = {
                  tag: tag,
                  tagIds: tagIds,
                };
                _this.$emit('tagBackFun', obj);

                if (_this.isDetail) {
                  _this.addTag(id);
                }
              }
            }
            _this.heidAdd();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('添加标签失败!');
          }
        }

      },
      chooseColor: function (_data) {
        var _this = this;
        var color = _data.color;
        _this.addData.color = color;
      },

      chooseTag: function (el) {
        var _this = this;
        var tag = _this.tag || [];
        var tagIds = [];
        for (var k in tag) {
          if (!tag[k]) {
            continue;
          }
          tagIds.push(tag[k].id);
        }
        var id = el.id;
        if (id && tagIds.indexOf(id) < 0) {
          tagIds.push(id);
          tag.push(el);
          var obj = {
            tag: tag,
            tagIds: tagIds,
          };
          _this.$emit('tagBackFun', obj);

          if (_this.isDetail) {
            _this.addTag(id);
          }
        }
        var tagArr = _this.tagArr || [];
        var tagarr = [];
        for (var k in tagArr) {
          if (!tagArr[k]) {
            continue;
          }
          if (tagArr[k].id != id) {
            tagarr.push(tagArr[k]);
          }
        }
        _this.tagArr = tagarr;
      },
      closeTag: function (el) {
        var _this = this;
        var id = el.id;
        var tag = _this.tag || [];
        var tagIds = [];
        var tags = [];
        for (var k in tag) {
          if (!tag[k]) {
            continue;
          }
          if (tag[k].id != id) {
            tags.push(tag[k]);
            tagIds.push(tag[k].id);
          }
        }
        var obj = {
          tag: tags,
          tagIds: tagIds,
        };
        _this.$emit('tagBackFun', obj);
      },
      changeInput: function (_data) {
        var _this = this;
        _this.name = _data.data || '';
        _this.getTagData();
      },
      getTagData: function () {
        var _this = this;
        var data = {
          title: _this.name,
        };
        var params = {
          url: '/tag/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            _this.tagArr = res.data || [];
          } else {
            _this.$Message.destroy();
            _this.$Message.error('获取标签列表失败!');
          }
        }
      },

      addTag: function (id) {
        var _this = this;
        if (!(id && _this.fid)) {
          return false;
        }
        var data = {
          appid: _this.fid,
          model: _this.queryData.id,
          tag: [id],
        };
        var params = {
          url: '/tag/model/add',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {

          } else {
            _this.$Message.destroy();
            _this.$Message.error('添加标签失败!');
          }
        }
      },
    }
  };
</script>
